<template>
  <div>
    <div :class="['wxc-search-bar','wxc-search-bar-'+theme]"
         :style="barStyle"
         v-if="mod==='default'">
      <input @blur="onBlur"
             @focus="onFocus"
             @input="onInput"
             @return="onSubmit"
             :return-key-type="returnKeyType"
             :autofocus="autofocus"
             :disabled="disabled"
             :value="value"
             ref="search-input"
             :type="inputType"
             :placeholder="placeholder"
             :style="{ width: needShowCancel ? '624px' : '710px' }"
             :class="['search-bar-input','search-bar-input-'+theme]" />
      <div v-if="disabled"
           @click="inputDisabledClicked"
           class="disabled-input"></div>
      <text class="icon search-bar-icon"
            :aria-hidden="true">&#xe741;</text>
      <text class="icon search-bar-close"
            v-if="showClose"
            :aria-hidden="true"
            @click="closeClicked">&#xe844;</text>
      <text :class="['search-bar-button','search-bar-button-'+theme]"
            :style="buttonStyle"
            v-if="needShowCancel"
            @click="cancelClicked">{{cancelLabel}}</text>
    </div>
    <div :class="['wxc-search-bar','wxc-search-bar-'+theme]"
         :style="barStyle"
         v-if="mod==='hasDep'">
      <input @blur="onBlur"
             @focus="onFocus"
             @input="onInput"
             @return="onSubmit"
             :disabled="disabled"
             :autofocus="autofocus"
             :return-key-type="returnKeyType"
             :value="value"
             :type="inputType"
             :placeholder="placeholder"
             :class="['search-bar-input','input-has-dep','search-bar-input-'+theme]" />
      <div v-if="disabled"
           @click="inputDisabledClicked"
           class="disabled-input has-dep-disabled"></div>
      <div :class="['bar-dep','.bar-dep-'+theme]"
           @click="depClicked">
        <text class="dep-text">{{depName}}</text>
        <text :aria-hidden="true"
              class="icon dep-arrow">&#xe604;</text>
      </div>
      <text class="icon search-bar-icon icon-has-dep"
            :aria-hidden="true">&#xe741;</text>
    </div>
  </div>
</template>

<script>

export default {
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    alwaysShowCancel: {
      type: Boolean,
      default: false
    },
    inputType: {
      type: String,
      default: 'text'
    },
    returnKeyType: {
      type: String,
      default: 'default'
    },
    mod: {
      type: String,
      default: 'default'
    },
    autofocus: {
      type: Boolean,
      default: false
    },
    theme: {
      type: String,
      default: 'gray'
    },
    barStyle: {
      type: Object,
      default: () => ({})
    },
    defaultValue: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: '搜索'
    },
    cancelLabel: {
      type: String,
      default: '取消 '
    },
    depName: {
      type: String,
      default: '杭州'
    },
    closeKeyboard: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    needShowCancel() {
      return this.alwaysShowCancel || this.showCancel;
    },
    buttonStyle() {
      const { barStyle } = this;
      if (barStyle.backgroundColor) {
        return { backgroundColor: barStyle.backgroundColor }
      }
      return {}
    }
  },
  data: () => ({
    showCancel: false,
    showClose: false,
    value: ''
  }),
  created() {
    this.defaultValue && (this.value = this.defaultValue);
    if (this.disabled) {
      this.showCancel = false;
      this.showClose = false;
    }
  },
  methods: {
    onBlur() {
      const self = this;
      setTimeout(() => {
        self.showCancel = false;
        self.detectShowClose();
        self.$emit('inputOnBlur', { value: self.value });
      }, 10);
    },
    autoBlur() {
      this.$refs['search-input'].blur();
    },
    onFocus() {
      if (this.isDisabled) {
        return;
      }
      this.showCancel = true;
      this.detectShowClose();
      this.$emit('inputOnFocus', { value: this.value });
    },
    closeClicked() {
      this.value = '';
      this.showCancel && (this.showCancel = false);
      this.showClose && (this.showClose = false);
      this.$emit('closeClicked', { value: this.value });
      this.$emit('inputOnInput', { value: this.value });
    },
    onInput(e) {
      this.value = e.value;
      this.showCancel = true;
      this.closeKeyboard && this.detectShowClose();
      this.$emit('inputOnInput', { value: this.value });
    },
    onSubmit(e) {
      this.onBlur();
      this.value = e.value;
      this.showCancel = true;
      this.detectShowClose();
      this.closeKeyboard && this.$tools.resignKeyboard()
      this.$emit('inputReturned', { value: this.value });
    },
    cancelClicked() {
      this.showCancel && (this.showCancel = false);
      this.showClose && (this.showClose = false);
      this.$tools.resignKeyboard()
      this.$emit('cancelClicked', { value: this.value });
    },
    detectShowClose() {
      this.showClose = (this.value.length > 0) && this.showCancel;
    },
    depClicked() {
      this.$emit('depChooseClicked', {});
    },
    inputDisabledClicked() {
      this.$emit('inputDisabledClicked', {});
    },
    setValue(value) {
      this.value = value;
    }
  }
};
</script>

<style scoped lang="scss">
@import "../css/variables.scss";

.icon {
  font-family: alicon;
}
.wxc-search-bar {
  padding-left: 20px;
  padding-right: 20px;
  background-color: #ffffff;
  width: 750px;
  height: 84px;
  flex-direction: row;
}
.wxc-search-bar-primary {
  background-color: $primary;
}
.search-bar-input {
  position: absolute;
  top: 10px;
  padding-top: 0;
  padding-bottom: 0;
  padding-right: 40px;
  padding-left: 60px;
  font-size: 28px;
  width: 624px;
  height: 64px;
  line-height: 64px;
  background-color: #e5e5e5;
  border-radius: 6px;
}
.search-bar-input-primary {
  background-color: lighten($primary, 42%);
}
.search-bar-icon {
  position: absolute;
  width: 34px;
  height: 34px;
  left: 34px;
  top: 24px;
  color: #999;
  font-size: 36px;
}
.search-bar-close {
  position: absolute;
  width: 30px;
  height: 30px;
  right: 120px;
  top: 28px;
  color: #999;
}
.search-bar-button {
  width: 94px;
  height: 36px;
  font-size: 30px;
  text-align: center;
  background-color: #ffffff;
  margin-top: 16px;
  margin-right: 0;
  color: #333333;
  position: absolute;
  right: 8px;
  top: 9px;
}
.search-bar-button-primary {
  background-color: $primary;
}
.input-has-dep {
  padding-left: 240px;
  width: 710px;
}
.bar-dep {
  width: 170px;
  padding-right: 12px;
  padding-left: 12px;
  height: 42px;
  align-items: center;
  flex-direction: row;
  position: absolute;
  left: 24px;
  top: 22px;
  border-right-style: solid;
  border-right-width: 1px;
  border-right-color: #c7c7c7;
}
.bar-dep-primary {
  border-right-color: #c7c7c7;
}
.dep-text {
  flex: 1;
  text-align: center;
  font-size: 26px;
  color: #666666;
  margin-right: 6px;
  lines: 1;
  text-overflow: ellipsis;
}
.dep-arrow {
  width: 24px;
  height: 24px;
}
.icon-has-dep {
  left: 214px;
}
.disabled-input {
  width: 750px;
  height: 64px;
  position: absolute;
  left: 0;
  background-color: transparent;
}
.has-dep-disabled {
  width: 550px;
  left: 200px;
}
</style>